<template>
  <div>
    <div class="headSearch">
      <!-- <div class="searCon">
        <span>name:</span>
        <a-input-search
          class="input"
          placeholder="input search text"
          enter-button
          @search="onSearch"
        />
      </div> -->
      <!-- <a-button class="editable-add-btn" @click="handleAdd">Add</a-button> -->
    </div>

    <a-table bordered :data-source="dataSource" rowKey="goods_id" :columns="columns">
      <!-- <template slot="name" slot-scope="text, record">
        <editable-cell :text="text" @change="onCellChange(record.key, 'name', $event)" />
      </template>-->
      <template slot="operation" slot-scope="text, record">
        <a-popconfirm
          v-if="dataSource.length"
          title="Sure to return?"
          @confirm="() => onReturn(record)"
        >
          <a href="javascript:;">return</a>
        </a-popconfirm>
      </template>
    </a-table>
  </div>
</template>
<script>
import api from '../api/index';

export default {
  data() {
    return {
      dataSource: [
      ],
      count: 2,
      columns: [
        {
          title: 'goodsName',
          dataIndex: 'goods_name',
          width: '30%',
          scopedSlots: { customRender: 'goods_name' },
        },
        {
          title: 'goodsType',
          dataIndex: 'goods_type',
        },
        {
          title: 'goodsStatus',
          dataIndex: 'goods_status',
        },
        {
          title: 'goodsDescription',
          dataIndex: 'goods_description',
        },
        {
          // operation
          title: 'operation',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],
    };
  },
  mounted() {
    this.onSearch();
  },
  methods: {
    onReturn(e) {
      api
        .post('/api/return', e.user_goods)
        .then(() => {
          this.onSearch();
        })
        .catch(({ response }) => {
          this.$message.error(response.data.msg);
        });
    },
    onSearch() {
      api
        .post('/api/getUserBook', {
          user_id: 2,
        })
        .then((res) => {
          this.dataSource = res.data.data.goods;
        })
        .catch(({ response }) => {
          this.$message.error(response.data.msg);
        });
    },
  },
};
</script>
<style>
.editable-cell {
  position: relative;
}

.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
  padding-right: 24px;
}

.editable-cell-text-wrapper {
  padding: 5px 24px 5px 5px;
}

.editable-cell-icon,
.editable-cell-icon-check {
  position: absolute;
  right: 0;
  width: 20px;
  cursor: pointer;
}

.editable-cell-icon {
  line-height: 18px;
  display: none;
}

.editable-cell-icon-check {
  line-height: 28px;
}

.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}

.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
  color: #108ee9;
}

.editable-add-btn {
}
.headSearch {
  display: flex;
  align-items: center;
  padding-bottom: 8px;
  justify-content: space-between;
}
.headSearch .input {
  width: 50%;
  margin-left: 4px;
}
.searCon {
  flex: 1;
  display: flex;
  align-items: center;
}
</style>
